<template>
  <div>
    <h2>自定义带Hover提示的按钮</h2>
    <!-- element 自带的button组件 -->
    <el-button type="primary" icon="el-icon-plus" size="mini"></el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
    <el-button type="warning" icon="el-icon-edit" size="mini"></el-button>
    <el-button type="info" icon="el-icon-search" size="mini"></el-button>

    <!-- 这里假设需要对 el-button 进行二次封装  也就是鼠标点到相应的图标能够有提示 -->
    <HintButton type="primary" icon="el-icon-plus" size="mini" title="增加"></HintButton>
    <HintButton type="danger" icon="el-icon-delete" size="mini" title="删除"></HintButton>
    <HintButton type="warning" icon="el-icon-edit" size="mini" title="修改"></HintButton>
    <HintButton type="info" icon="el-icon-search" size="mini" title="查询"></HintButton>

  </div>
</template>

<script type="text/ecmascript-6">
  import HintButton from '@/pages/Communication/AttrsListenersTest/HintBuuton.vue'
  export default {
    name: 'AttrsListenersTest',
    components: {HintButton,},
    methods: {
      
    },
  }
</script>
